<template>
	<view class="choose_result">
		<view class="close" @click="close">
			<image src="@/static/images/close.png"></image>
		</view>
		<view class="title">选择饰品</view>
		<scroll-view scroll-x class="scroll_box">
			<view class="item" v-for="item in props.checkbox">
				<image :src="item.product_cover" class="cover"></image>
			</view>
		</scroll-view>
		<view class="desc">温馨提示：藏品NFT一经合成不可撤销，选中的藏品将销毁</view>
		<view class="submit">
			<view @click="submit">确认合成</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onUnmounted
	} from "vue";
	const props = defineProps({
		checkbox: {
			type: Array,
			default: () => []
		}
	});
	const emit = defineEmits(["close", "confirm"]);
	const close = () => emit("close");
	const submit = () => emit("confirm");
</script>

<style scoped lang="scss">
	.choose_result {
		padding: 30rpx;
		box-sizing: border-box;
		background: #2F2F2F;
		position: relative;

		.close {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			z-index: 2;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.title {
			text-align: center;
			color: #FFFFFF;
			font-size: 40rpx;
			font-weight: bold;
		}

		.scroll_box {
			padding-top: 90rpx;
			box-sizing: border-box;
			white-space: nowrap;

			.item {
				display: inline-block;
				background: rgba(232, 227, 66, 0.1);
				border: 2px solid #E8E342;
				border-radius: 50%;
				margin-right: 18rpx;
				overflow: hidden;

				&:last-child {
					margin-right: 0;
				}

				.cover {
					width: 160rpx;
					height: 160rpx;
				}
			}
		}

		.desc {
			color: #999999;
			font-size: 24rpx;
			padding: 50rpx 0 80rpx;
			box-sizing: border-box;
		}

		.submit {
			padding: 0 35rpx;
			box-sizing: border-box;

			view {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #111111;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 20rpx;
				background: #DDF247;
			}
		}
	}
</style>